<!--1.页面 标签 显示-->
<template>
<div>
  <t-avatar
    class="avatar-example"
    image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
    shape="circle"
    size="100px"
></t-avatar>
  <h2>欢迎加入我们</h2>
  <div>
    <div>
      <t-input label="昵称" v-model="user.nickName" placeholder="请输入昵称"></t-input>
    </div>
    <div>
      <t-input label="手机" v-model="user.phone" type="number" placeholder="请输入手机号"></t-input>
    </div>
    <div>
      <t-input label="密码" v-model="user.password" type="password" placeholder="请输入密码"></t-input>
    </div>
  <div style="margin-top: 20px">
    <t-button size="large" theme="light" @click="register" block>注册账号</t-button>
  </div>
    <!--  其他导航-->
    <div style="margin-top: 20px;">
      <div style="float: left">
        <router-link style="color: grey;font-size: 12px;" to="/">已有账号点击登录</router-link>
      </div>
      <div style="float: right">
        <router-link style="color: grey;font-size: 12px;" to="/find">忘记密码点击找回</router-link>
      </div>
    </div>
  </div>
  <div style="clear: both;position: absolute;bottom: 20px;align-items: center;text-align: center;width: 100%">
    <t-radio
        style="text-align: center"
        name="radio"
        v-model="agree">
      <template #label>
        <div style="font-size: 12px;color: grey;float: left">
          我同意准守<router-link class="rl" to="">《MBTI用户服务协议》</router-link>
        </div>
      </template>

    </t-radio>
  </div>
</div>
</template>
<!--2.js代码 vue3的写法 -->
<script setup>
import {ref} from 'vue'
import { post } from '../util/Request'
import { Toast } from 'tdesign-mobile-vue'
import {useRouter} from "vue-router";

//定义属性
const agree=ref(false)
const router=useRouter()
const user=ref({
  nickName:"",
  phone:"",
  password:""
})

//定义函数
const register=()=>{
  if(agree.value){
    //请求接口 实现用户注册
    post("user/register",user.value).then(r=>{
      console.log(r)
      if(r.code==0){
        //注册成功
        //跳转到登录页面 路由
        router.push("/")
      }else{
        //失败
        Toast(r.data)
      }
    })

  }else{
    Toast("请同意用户服务协议")
  }

}

</script>
<!--3.css 样式 美化-->
<style scoped>

</style>